<template>
    <div :class="getName" id="app">
      <!-- 侧边 导航栏 -->
      <aside class="h-aside fl">
        <!-- 导航栏 -->
        <i @click="drawer = true" class="iconfont iconsanheng" v-if="terminal === 'ph'"></i>
        <nav-bar></nav-bar>
      </aside>
      <!-- 主体区域  -->
      <article class="h-article fr">
        <!-- 内容区域 -->
        <router-view></router-view>
        <!-- 脚部区域 -->
        <footer-bar></footer-bar>
      </article>
      
      <!-- 右侧 浮动定位 导航区域 -->
      
      <float-bar class="h-float-nav" v-if="terminal === 'pc'"></float-bar>
      <el-drawer class="h-ltr" :visible.sync="drawer" :with-header="false" direction="ltr" size="60%" v-else>
        <ul class="h-nav-ph">
          <li @click="handleRouterClick('introduction')">简介</li>
          <li @click="handleRouterClick('shop')">店铺</li>
          <li @click="handleRouterClick('team')">团队</li>
          <li @click="handleRouterClick('knowledge')">珠宝知识</li>
          <li @click="handleRouterClick('QueryValid')">产品查询</li>
        </ul>
      </el-drawer>
    </div>
</template>

<script>
import NavBar from '@/views/NavBar/'	// 导航栏
import FloatBar from '@/views/FloatBar/'	// 浮动导航
import FooterBar from '@/views/FooterBar/'	// 底部

export default {
  name: 'app',
  components: {
    NavBar,
    FloatBar,
    FooterBar,
  },
  data(){
    return {
      terminal: '', // 终端类型
      drawer: false,
      CNZZ_ID: '1278849494'
    }
  },
  mounted() {  
     // 创建cnzz统计js
    const script = document.createElement('script')  
    script.src = 'https://v1.cnzz.com/z_stat.php?id='+this.CNZZ_ID+'&web_id='+this.CNZZ_ID
    script.language = 'JavaScript'  
    document.body.appendChild(script)  
  },
  computed: {
    getName(){
      if(this.terminal === 'pc'){
        return 'h-app h-pc'
      } else {
        return 'h-app h-ph'
      }
    }
  },
  watch: {
    '$route': function(to, from){
      console.log(to,from)
// eslint-disable-next-line no-irregular-whitespace
　    document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
       setTimeout(() => { //避免首次获取不到window._czc
          if (window._czc) {  
            let location = window.location; 
            let contentUrl = location.pathname + location.hash;  
            let refererUrl = '/';  
            // 用于发送某个URL的PV统计请求，
            window._czc.push(['_trackPageview', contentUrl, refererUrl])  
          }
        }, 300) 
    },
    immediate: true  // 首次进入页面即执行
  },
  created(){
    this.terminal = localStorage.getItem('terminalm')
    console.log('this.terminal***', this.terminal)
  },
  methods: {
    /**
    *@Description
    *@Param
    *@Return 点击跳转路由.
    **/
    handleRouterClick (item) {
      this.$router.push({ name: item, params: { id: item.id } })
      this.drawer = false
    }
  }
}
</script>
<style lang="scss" scoped>
  .h-app {
    font-family: '微软雅黑', 'Avenir', Helvetica, Arial, sans-serif;
    font-size: 14px;
    overflow: hidden;
    margin: 0 auto;
    color: #7D7D7D;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
   .h-pc {
     /deep/.h-logo{
      margin-left: -40px !important;
    }
   }
  .h-app.h-pc{
    width: 100%;
    margin-top: 68px;
    .h-pc .h-logo{
      margin-left: -40px !important;
    }
    .h-aside {
      width: 530px;
      padding-left: 68px;
      position: fixed;
      top:30px;
    }
    .h-article {
      width: 1050px;
      position: relative;
      margin-left: 530px;
    }
    .h-float-nav {
      position: fixed;
      z-index: 3;
      top: 150px;
      right: 10px;
      background: #fff;
    }
      .fr {
        float: left;
    }
    .h-content{
      margin-top: 15px;
      margin-right: 15px;
    }
  }
  .h-app.h-ph{
    width: 100%;
    padding-bottom: 100px;
    .h-aside, .h-article {
      width: 100%;
    }
    .iconsanheng{
      position: absolute;
      top: 0;
      right: 0;
      width: 60px;
      height: 60px;
      line-height: 60px;
      font-size: 25px;
      text-align: center;
    }
  }
  /* 移动端 侧边栏 */
  .h-ltr{
    /deep/ .el-drawer{
      background: #333;
    }
    .h-nav-ph{
      line-height: 45px;
      color: #fff;
      li{
        padding-left: 20px;
        border-bottom: 1px solid #fff;
      }
    }
  } 
</style>
<style lang="scss">
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }
    address{
      font-style: normal;
    }
    .fl {
        float: left;
    }

    .fr {
        float: right;
    }
    .h-hidden{
      overflow: hidden;
    }
    .h-inline{
      display: inline-block;
    }
    .mt5 {
      margin-top: 5px;
    }
    .mt10 {
        margin-top: 10px;
    }
    .mb20{
      margin-bottom: 20px;
    }
    .mr15{
      margin-right: 15px;
    }
    .mt30{
      margin-top: 30px;
    }
    .mtb20{
      margin: 20px 0;
    }
    .mtb50{
      margin: 50px 0;
    }
    .pt10 {
      padding-top: 10px;
    }
    .ptl15{
      padding: 0 15px;
    }
    .pt90 {
       padding-top: 90px;
    }
    .pt320 {
        padding-top: 320px;
    }
    /* 模块部分 标题 */
    .h-model-title{
      font-family: '宋体';
      text-align: center;
      h3{
        display: inline-block;
        padding-bottom: 20px;
        margin-bottom: 10px;
        font-weight: bold;
        font-size: 30px;
        color: #9a0630;
        border-bottom: 1px solid #9a0630;
      } 
      p{
        font-weight: bold;
        color: #9a0630;
      }
    }
   /* iconfont 图标 */ 
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>
